<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item class="rigthText">
          <el-input
            v-model.trim="searchForm.keywords"
            class="ui-w320"
            placeholder="关键词"
            @keyup.native.enter="handleSearchFn()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearchFn()" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="50">
          <template slot-scope="scope">
            {{ pageObj.currentPage * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="见证阶段">
          <template v-slot="{row}">
            {{row.jzsx.jdcode |  jdFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="见证事项">
          <template v-slot="{row}">
            {{row.jzsx.sxname}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="事项明细"/>
      </el-table>
    </div>
    <div class="layout-footer">
      <wpagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :pageSizes="pageObj.pageSizes"
        @pagination="sxList()"
      />
    </div>
  </div>
</template>

<script>
import { list } from "../../../../api/weeon/sxgl";
export default {
  props: {},
  filters: {
    jdFilter(key) {
      const dataMap = {
        'ZB': '招标阶段',
        'TB': '投标阶段',
        'KB': '开标阶段',
        'PB': '评标阶段',
        'DB': '定标阶段',
        'LY': '履约阶段',
      }
      if (key) {
        key = key.trim();
      }
      return dataMap[key];
    },
  },
  data() {
    return {
      btnLoading: false,
      searchForm: {
        keyword: ""
      },
      tableData: [],
      tableLoading: false,
      pageObj: {
        total: 0,
        currentPage: 0,
        pageSize: 20,
        pageSizes: [10, 20, 30]
      }
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.sxList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    // 搜索查询
    handleSearchFn() {
      this.pageObj.total = 0;
      this.pageObj.currentPage = 0;
      this.sxList();
    },
    // 数据列表
    async sxList() {
      try {
        this.tableLoading = true;
        this.tableData = [];
        let params = {
          keyword: this.searchForm.keywords,
          pageNo: this.pageObj.currentPage,
          pageSize: this.pageObj.pageSize
        };
        const res = await list(params);
        this.tableLoading = false;
        if (res.stat === 1) {
          if (res.data.page.totalElements === 0 && this.pageObj.currentPage !== 0) {
            this.pageObj.currentPage = 0;
            this.$nextTick(() => {
              this.sxList();
            });
            return;
          }
          this.tableData = res.data.page.content;
          console.log(this.tableData, "-------------------");
          this.pageObj.total = res.data.page.totalElements;
        } else {
          this.$message({
            type: "error",
            message: res.msg || "获取数据失败，请稍后再试",
            single: true
          });
        }
      } catch (error) {
        console.log(error);
        this.tableLoading = false;
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.witness-result {
  width: 76px;
  height: 20px;
  line-height: 20px;
  background: #fc9306;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.rigthText {
  padding-right: 10px;
  float: right;
  // margin-left: 460px !important;
}
</style>
